<template>
	<view class="noticeLayout">
		<view class="title">
			<view v-if="detail.select" class="tag">
				<uni-tag text="置顶" type="error" inverted></uni-tag>
			</view>
			<view class="font">{{detail.title}}</view>
		</view>
		
		<view class="info">
			<view class="item">{{detail.author}}</view>
			<view class="item">
				<uni-dateformat :date="detail.publish_date" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
			</view>
		</view>
		
		<!-- 返回的content是富文本，自带标签 -->
		<!-- 两种写法，适配未测试 -->
		<!-- <view v-html="detail.content" class="content"></view> -->
		<view class="content">
			<!-- 这是官方给的基础富文本渲染标签 -->
			<!-- <rich-text :nodes="detail.content"></rich-text> -->
			<!-- 这是插件市场找的富文本标签，功能更多 -->
			<mp-html :content="detail.content" />
		</view>
		
		<view class="count">
			阅读 {{detail.view_count}}
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { apiNoticeDetail } from '@/api/apis.js'

const id = ref(null)
const detail = ref({})

onLoad((e) => {
	console.log(e)
	id.value = e.id
	getNoticeDetail()
})

const getNoticeDetail = async () => {
	const res = await apiNoticeDetail({id: id.value})
	detail.value = res.data
}


</script>

<style lang="scss" scoped>
.noticeLayout {
	padding: 30rpx;
	.title {
		display: flex;
		padding-bottom: 30rpx;
		font-size: 40rpx;
		line-height: 1.6em;
		color: #111;
		.tag {
			transform: scale(0.8);
			transform-origin: left center;
			flex-shrink: 0;
		}
		.font {
			padding-left: 6rpx;
		}
	}
	.info {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #999;
		.item {
			padding-right: 20rpx;
		}
	}
	.content {
		padding: 50rpx 0;
	}
	.count {
		font-size: 28rpx;
		color: #999;
	}
}
</style>
